<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>系统-任务-详情</title>

    <link rel="stylesheet" href="../../plugins/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <link rel="stylesheet" href="../../plugins/codemirror/codemirror.css">
    <link rel="stylesheet" href="../../plugins/codemirror/theme/darcula.css">
    <link rel="stylesheet" href="../../plugins/codemirror/addon/hint/show-hint.css">
    <link rel="stylesheet" href="../../adminLTE/css/adminlte.min.css">
    <link rel="stylesheet" href="../css/cloud.css">
</head>
<body class="content-wrapper" style="padding: 15px">
<!--基本信息-->
<div class="card card-outline card-info">
    <div class="card-header">
        <h3 class="card-title"><i class="fa fa-commenting"></i> 基本信息</h3>
    </div>
    <div id="base-info" class="card-body">
        <div class="form-group row">
            <label for="name" class="col-md-1 col-form-label">名称</label>
            <div class="col-md-5"><input type="text" class="form-control" id="name" disabled></div>
        </div>
        <div class="form-group row">
            <label for="status" class="col-md-1 col-form-label">状态</label>
            <div class="col-md-5" style="padding-top: 7px; padding-bottom: 7px"><span class="badge badge-secondary" id="status">加载中</span></div>
        </div>
        <div class="form-group row">
            <label for="owner" class="col-md-1 col-form-label">责任人</label>
            <div class="col-md-5"><input type="text" class="form-control" id="owner" disabled></div>
        </div>
        <div class="form-group row">
            <label for="start" class="col-md-1 col-form-label">开始时间</label>
            <div class="col-md-5"><input type="text" class="form-control" id="start" disabled></div>
        </div>
        <div class="form-group row">
            <label for="finish" class="col-md-1 col-form-label">结束时间</label>
            <div class="col-md-5"><input type="text" class="form-control" id="finish" disabled></div>
        </div>
    </div>
</div>
<!--描述-->
<div class="card card-outline card-info">
    <div class="card-header">
        <h3 class="card-title"><i class="fa fa-info-circle"></i> 描述</h3>
    </div>
    <div class="card-body"><textarea id="describe"></textarea></div>
</div>
<!--输入-->
<div class="card card-outline card-info">
    <div class="card-header">
        <h3 class="card-title"><i class="fa fa-download"></i> 输入</h3>
    </div>
    <div class="card-body"><textarea id="stdin"></textarea></div>
</div>
<!--输出-->
<div class="card card-outline card-info">
    <div class="card-header">
        <h3 class="card-title"><i class="fa fa-upload"></i> 输出</h3>
    </div>
    <div class="card-body"><textarea id="stdout"></textarea></div>
</div>
<!--日志-->
<div class="card card-outline card-info">
    <div class="card-header">
        <h3 class="card-title">
            <i class="fa fa-file-code-o"></i> 日志
            <small id="stdlog-count" data-value="0">共0行</small>
        </h3>
        <div class="card-tools">
            <button type="button" class="btn btn-tool log-tail log-tail-all" title="显示全部日志" data-value="all">全部</button>
            <button type="button" class="btn btn-tool log-tail log-tail-1000" title="只显示末尾1000行日志" data-value="1000">1000行</button>
            <button type="button" class="btn btn-tool log-tail log-tail-500" title="只显示末尾500行日志" data-value="500">500行</button>
            <button type="button" class="btn btn-tool log-tail log-tail-100" title="只显示末尾100行日志" data-value="100">100行</button>
            <button type="button" class="btn btn-tool log-tail log-tail-50" title="只显示末尾50行日志" data-value="50">50行</button>
            <button type="button" class="btn btn-tool log-tail log-tail-10" title="只显示末尾10行日志" data-value="10">10行</button>
        </div>
    </div>
    <div class="card-body"><textarea id="stdlog"></textarea></div>
</div>

<script src="../../plugins/jquery/jquery.min.js"></script>
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../../plugins/codemirror/codemirror.js"></script>
<script src="../../plugins/codemirror/mode/sql/sql.js"></script>
<script src="../../plugins/codemirror/mode/shell/shell.js"></script>
<script src="../../plugins/codemirror/mode/javascript/javascript.js"></script>
<script src="../../adminLTE/js/adminlte.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/child.js"></script>
<script>

    function TaskCtrl(id) {
        this.id = id;
        this.data = undefined;

        this.logTail = "50";

        this.descibeMirror = undefined;
        this.stdinMirror = undefined;
        this.stdoutMirror = undefined;
        this.stdlogMirror = undefined;

        this.setLogTail = function () {
            $(".log-tail").removeClass("bg-info");
            $(".log-tail-" + this.logTail).addClass("bg-info");
        }

        this.initCodeMirror = function () {
            this.descibeMirror = CodeMirror.fromTextArea(document.getElementById("describe"), {
                mode: "application/json",
                theme: "darcula",
                readOnly: "true"
            });
            this.descibeMirror.setSize("auto", "auto");

            this.stdinMirror = CodeMirror.fromTextArea(document.getElementById("stdin"), {
                mode: "application/json",
                theme: "darcula",
                readOnly: "true"
            });
            this.stdinMirror.setSize("auto", "auto");

            this.stdoutMirror = CodeMirror.fromTextArea(document.getElementById("stdout"), {
                mode: "application/json",
                theme: "darcula",
                readOnly: "true"
            });
            this.stdoutMirror.setSize("auto", "auto");

            this.stdlogMirror = CodeMirror.fromTextArea(document.getElementById("stdlog"), {
                mode: "application/json",
                theme: "darcula",
                readOnly: "true"
            });
            this.stdlogMirror.setSize("auto", "auto");
        }

        this.getData = function () {
            var self = this;
            $.ajax({
                url: Url.baseService.taskDetail.replace("{id}", id),
                type: HttpMethod.get,
                success: function (result, status, xhr) {
                    self.data = result;
                    self.showData();
                }
            })
        }

        this.showBase = function () {
            $("#name").val(this.data.name);

            var statusClass = "badge-warning";
            switch (this.data.status) {
                case "PENDING":
                    statusClass = "badge-warning";
                    break;
                case "RUNNING":
                    statusClass = "badge-info";
                    break;
                case "SUCCESS":
                    statusClass = "badge-success";
                    break;
                case "ERROR":
                    statusClass = "badge-warning";
                    break;
                default:
                    statusClass = "badge-warning";
                    break;
            }
            $("#status").removeClass("badge-warning")
                .removeClass("badge-info")
                .removeClass("badge-success")
                .addClass(statusClass)
                .html(this.data.statusValue);

            $("#owner").val(this.data.owner ? this.data.owner.userName : "")
            $("#start").val(this.data.startDate ? this.data.startDate : "")
            $("#finish").val(this.data.finishDate ? this.data.finishDate : "")
        }

        this.showDescribe = function () {
            this.descibeMirror.setValue(this.data.description ? this.data.description : "")
        }

        this.showStdin = function () {
            if (this.data.stdin) {
                try {
                    this.stdinMirror.setValue(JSON.stringify(JSON.parse(this.data.stdin), null, 4))
                    this.stdinMirror.setOption("mode", "application/json");
                } catch (e) {
                    this.stdinMirror.setValue(this.data.stdin)
                    this.stdinMirror.setOption("mode", "text/x-sh");
                }
            } else {
                this.stdinMirror.setValue("")
            }
        }

        this.showStdout = function () {
            if (this.data.stdout) {
                try {
                    this.stdoutMirror.setValue(JSON.stringify(JSON.parse(this.data.stdout), null, 4))
                    this.stdoutMirror.setOption("mode", "application/json");
                } catch (e) {
                    this.stdoutMirror.setValue(this.data.stdout)
                    this.stdoutMirror.setOption("mode", "text/x-sh");
                }
            } else {
                this.stdoutMirror.setValue("")
            }
        }

        this.showStdlog = function () {
            if (this.data.logs && this.data.logs.length > 0) {
                $("#stdlog-count").html("共" + this.data.logs.length + "行").attr("data-value", this.data.logs.length);

                var logs = this.data.logs;
                if ("all" !== this.logTail) {
                    logs = logs.slice(-1 * this.logTail);
                }

                var text = "";
                for (let i = 0; i < logs.length; i++) {
                    if (text !== "") text += "\r\n"
                    text += logs[i].out;
                }
                this.stdlogMirror.setValue(text)
            } else {
                this.stdlogMirror.setValue("")
            }
        }

        this.showData = function () {
            this.showBase();
            this.showDescribe();
            this.showStdin();
            this.showStdout();
            this.showStdlog();
        }

        this.addLog = function (log) {
            if (this.data && this.data.logs) {
                this.data.logs.push(log);
                this.showStdlog();
            }
        }

        this.bind = function () {
            var self = this;
            $(".log-tail").click(function () {
                self.logTail = $(this).attr("data-value");
                self.setLogTail();
                self.showStdlog();
            });
        }
    }

    var taskId = Utils.getParams(location.href)["id"];
    var taskCtrl = new TaskCtrl(taskId);
    taskCtrl.setLogTail();
    taskCtrl.initCodeMirror();
    taskCtrl.getData();
    taskCtrl.bind();


    var listener = function (event) {
        if (event.type === "LOG") {
            if (event.data.taskId === taskId) {
                taskCtrl.addLog(event.data);
            }
        } else {
            if (event.data === taskId) {
                taskCtrl.getData();
            }
        }
    };

    listener.owner = window.location.href;
    parent.window.frameCtrl.websockerCtrl.taskListener.push(listener);
</script>

</body>
</html>